<template>
  <div class="snInfo">
    <div class="info_top flex flex_bet felx_align">
      <div class="flex flex_bet felx_align">
        <div class="state" :class="is_online == 1 ? 'on_line' : 'off_line'">
          <i class="iconfont icondian3"></i> <span>{{is_online == 1 ? '设备在线' : '设备已离线'}}</span>
        </div>
        <span v-if="false" style="line-height:16px;margin-top:1px;margin-left:10px;color:#999">离线时间: {{studentStatus.offlinetime | newDate }}</span>
      </div>
      <div>
        <el-button size="mini" type="primary" @click="refresh(snInfoTabel.sn)">刷新状态</el-button>
        <el-button size="mini" type="primary" @click="sninfoClose">关闭</el-button>
      </div>
    </div>
    <el-row :gutter="20" class="ipad ">
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="ipad_info bg_box">
          <div class="header flex flex_bet felx_align">
            <div class="title_w">设备状态: {{studentStatus.is_lock == 0 ? '解锁' : '管控'}}</div>
            <div class="flex felx_align" style="font-size:12px">
              <span class="mar_right" style="font-size:12px">电压: {{snInfoTabel.voltage ? snInfoTabel.voltage : '-'}}</span>{{snInfoTabel.electric ? snInfoTabel.electric + '%' : ''}}
              <battery style="margin-left: 5px" :proQuantity="Number(snInfoTabel.electric)" />
            </div>
          </div>
          <div class="content">
            <div class="ipad_img"><img :src="is_online == 1 ? on_lineImg : off_lineImg" alt=""></div>
            <p>归属：{{studentStatus.username}}</p>
            <p>批次：{{studentStatus.batch}}</p>
            <p>姓名：{{studentStatus.realname}}</p>
            <p>班级：{{studentStatus.classlevel}}</p>
            <p>学号：{{studentStatus.sno}}</p>
          </div>
          <div class="footer ">
            <el-tooltip :content="snInfoTabel.address" placement="top" effect="light">
              <div class="mation">定位：{{snInfoTabel.address}}</div>
            </el-tooltip>
            <div class="" style="margin-top:10px">
              <el-button size="mini" round type="primary" style="border-radius:20px" @click.stop="singleSnRestarts(snInfoTabel.id)">设备重启</el-button>
              <el-button size="mini" round type="primary" style="border-radius:20px" @click.stop="singleSnReset(snInfoTabel.id)">恢复出厂</el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="bg_box hardware_info">
          <div class="title_w">设备硬件信息</div>
          <div class="hardware">
            <ul>
              <li class="flex felx_align flex_bet">
                <p>机型:</p>
                <div>{{snInfoTabel.device}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>本机SN:</p>
                <div>{{snInfoTabel.sn}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>设备MAC地址:</p>
                <div>{{studentStatus.mac}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>IMEI:</p>
                <div>{{snInfoTabel.imei}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>首次激活时间:</p>
                <div>{{snInfoTabel.createtime| newDate}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>设备设备内存:</p>
                <div>{{snInfoTabel.memory}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>存储占用剩余空间:</p>
                <div>{{snInfoTabel.storage}}</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="bg_box hardware_info" style="margin-top:10px">
          <div class="title_w">设备软件信息</div>
          <div class="hardware">
            <ul>
              <li class="flex felx_align flex_bet">
                <p>固件版本号:</p>
                <div>{{snInfoTabel.firmware_version}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>ROM版本:</p>
                <div>{{snInfoTabel.rom}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>设备信息版本:</p>
                <div>{{snInfoTabel.appstore_version}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>教管壹版本:</p>
                <div>{{snInfoTabel.store_version}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>首次激活时间:</p>
                <div>{{snInfoTabel.createtime| newDate}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>推送ID:</p>
                <div>{{snInfoTabel.jpush_id}}</div>
              </li>
              <li class="flex felx_align flex_bet">
                <p>zdzlauncher版本号:</p>
                <div>{{snInfoTabel.zdzlauncher_version}}</div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="10">
        <div class="bg_box" style="padding-bottom:0">
          <div class="header flex flex_bet felx_align">
            <div class="title_w">屏幕监控</div>
            <div>
              <el-button size="mini" type="primary" :loading="photoLoading" @click="getquerySnScreens(snData)">刷新</el-button>
              <el-button size="mini" type="primary" @click="getlaunchScreenshot(snInfoTabel.sn)">截屏</el-button>
              <el-button size="mini" type="primary" @click.stop="getdeleteAll(snInfoTabel.sn)">清除截屏</el-button>
            </div>
          </div>
          <div class="swiper_img">
            <div class="siper_txt" v-if="printscreenSwiper.length == 0">暂无截图</div>
            <el-carousel height="304px" trigger="click" :autoplay="false">
              <el-carousel-item v-for="(item,index) in printscreenSwiper" :key="index">
                <h3 class="small">{{ item.createtime| newDate }}</h3>
                <div style="width:100%;text-align: center;" class="location_img">
                  <img @click="getImgIndex(index)" v-if="item.imgSize" :src="item.img" alt="" :style="item.imgSize.height > 1200 ? 'height:230px;width:140px' : 'width:355px;height:232px'">
                </div>
              </el-carousel-item>
            </el-carousel>
            <!-- 图片预览 -->
            <img-viewer v-if="showViewer" :on-close="closeViewer" :initial-index="imageIndex" :url-list="previewSrcList"></img-viewer>
          </div>
        </div>
      </el-col>
    </el-row>

    <div style="margin-top:20px">
      <el-collapse style="border:none;">
        <el-collapse-item>
          <template slot="title">
            <div class="flex flex_bet felx_align" style="width:100%;padding:0 20px">
              <div class="mation" style="font-weight:600">应用安装信息<span class="tilte_prompt" v-if="app_install.length">(更新时间： {{app_install[0].create_time | newDate}})</span></div>
              <div>{{`已安装 ( ${app_install.length} ) 个应用`}}</div>
            </div>
          </template>
          <div class="ipad_table">
            <el-table :data="app_install" style="width: 100%">
              <el-table-column prop="date" label="应用" min-width="120" align="left">
                <template slot-scope="scope">
                  <div class="flex felx_align">
                    <div class="app-img"><img :src="scope.row.app_img | imgErr" alt=""></div>
                    <div>{{scope.row.app_name}}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="运行状态" min-width="80" align="center">
                <template slot-scope="scope"><i class="iconfont icondian3" :class="scope.row.state ? 'on_line' : 'off_line'"></i></template>
              </el-table-column>
              <el-table-column prop="app_version_name" min-width="140" label="版本号" align="center"></el-table-column>
              <el-table-column prop="address" label="大小" min-width="140" align="center">
                <template slot-scope="scope">{{scope.row.app_size | zhDate}}</template>
              </el-table-column>
              <el-table-column prop="address" min-width="140" label="安装时间" align="center">
                <template slot-scope="scope">{{scope.row.install_time | newDate}}</template>
              </el-table-column>
              <el-table-column label="操作" min-width="240" align="center">
                <template slot-scope="scope">
                  <el-row>
                    <el-button size="mini" @click.stop="getclearInstallAppCache(scope.row)">清除缓存</el-button>
                    <el-button size="mini" @click.stop="getforceStopApp(scope.row)">关闭</el-button>
                    <el-button size="mini" @click.stop="getuninstallPackage(scope.row)">卸载</el-button>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 管控策略查询 -->
    <div style="margin-top:20px">
      <el-collapse style="border:none;">
        <el-collapse-item>
          <template slot="title">
            <div class="flex flex_bet felx_align" style="width:100%;padding:0 20px">
              <div class="mation" style="font-weight:600">管控策略查询</div>
            </div>
          </template>
          <div class="ipad_table">
            <div class="control_box" v-show="controlData.appIconList.length != 0">
              <div class="header">系统桌面可见性图标管控</div>
              <div style="padding: 0 40px;">
                <el-table :data="controlData.appIconList" border style="width: 100%">
                  <el-table-column prop="username" label="归属" min-width="80" align="center"></el-table-column>
                  <el-table-column prop="batch" min-width="80" label="批次" align="center"></el-table-column>
                  <el-table-column prop="package_name" label="应用名称" min-width="140" align="center"></el-table-column>
                  <el-table-column prop="package" label="包名" min-width="140" align="center"></el-table-column>
                  <el-table-column prop="create_time" min-width="140" label="创建时间" align="center">
                    <template slot-scope="scope">{{scope.row.create_time | newDate}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="control_box" style="margin-top:20px" v-show="controlData.timeControlList.length != 0">
              <div class="header">平板可用时间管控</div>
              <div style="padding: 0 40px;">
                <el-table :data="controlData.timeControlList" border style="width: 100%">
                  <el-table-column prop="username" label="归属" min-width="80" align="center"></el-table-column>
                  <el-table-column prop="batch" min-width="80" label="批次" align="center"></el-table-column>
                  <el-table-column prop="start_time" label="开始时间" min-width="140" align="center"></el-table-column>
                  <el-table-column prop="end_time" label="结束时间" min-width="140" align="center"></el-table-column>
                  <el-table-column prop="create_time" min-width="140" label="创建时间" align="center">
                    <template slot-scope="scope">{{scope.row.create_time | newDate}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="control_box" style="margin-top:20px" v-show="controlData.whiteAppList.length != 0">
              <div class="header">应用白名单辅助管理</div>
              <div style="padding: 0 40px;">
                <el-table :data="controlData.whiteAppList" border style="width: 100%">
                  <el-table-column prop="username" label="归属" min-width="80" align="center"></el-table-column>
                  <el-table-column prop="batch" min-width="80" label="批次" align="center"></el-table-column>
                  <el-table-column prop="package_name" label="包名" min-width="140" align="center"></el-table-column>
                  <el-table-column prop="create_time" min-width="140" label="创建时间" align="center">
                    <template slot-scope="scope">{{scope.row.create_time | newDate}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="control_box" style="margin-top:20px" v-show="controlData.otherSettingList.length != 0">
              <div class="header">系统及影音娱乐管控</div>
              <div style="padding: 0 40px;">
                <el-table :data="controlData.otherSettingList" border style="width: 100%">
                  <el-table-column min-width="100" align="center" prop="username" label="归属"></el-table-column>
                  <el-table-column min-width="100" align="center" prop="batch" label="批次"></el-table-column>
                  <el-table-column min-width="130" align="center" prop="qch_restore" label="恢复出厂设置开关">
                    <template slot-scope="scope">{{scope.row.qch_restore == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_call" label="电话通话功能">
                    <template slot-scope="scope">{{scope.row.setting_call == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_memory" label="扩展存储卡">
                    <template slot-scope="scope">{{scope.row.setting_memory == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_hotspot" label="wifi共享热点">
                    <template slot-scope="scope">{{scope.row.setting_hotspot == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="140" align="center" prop="setting_bluetooth" label="蓝牙数据功能开关">
                    <template slot-scope="scope">{{scope.row.setting_bluetooth == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="140" align="center" prop="setting_bhtvideo" label="蓝牙音频连接">
                    <template slot-scope="scope">{{scope.row.setting_bhtvideo == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="160" align="center" prop="setting_context" label="蓝牙名称"></el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_navigation" label="系统导航条显示">
                    <template slot-scope="scope">{{scope.row.setting_navigation == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_statusbar" label="状态栏显示">
                    <template slot-scope="scope">{{scope.row.setting_statusbar == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_camera" label="摄像头开关">
                    <template slot-scope="scope">{{scope.row.setting_camera == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_clock" label="时钟功能开关">
                    <template slot-scope="scope">{{scope.row.setting_clock == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_recording" label="录音功能开关">
                    <template slot-scope="scope">{{scope.row.setting_recording == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_music" label="音乐功能开关">
                    <template slot-scope="scope">{{scope.row.setting_music == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_picture" label="图库功能开关">
                    <template slot-scope="scope">{{scope.row.setting_picture == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_wallpaper" label="壁纸功能开关">
                    <template slot-scope="scope">{{scope.row.setting_wallpaper == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="140" align="center" prop="setting_file" label="文件管理功能开关">
                    <template slot-scope="scope">{{scope.row.setting_file == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="140" align="center" prop="setting_browserInput" label="浏览器网址输入开关">
                    <template slot-scope="scope">{{scope.row.setting_browserInput == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="140" align="center" prop="setting_browser" label="浏览器功能开关">
                    <template slot-scope="scope">{{scope.row.setting_browser == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="setting_phone" label="电话白名单">
                    <template slot-scope="scope">{{scope.row.setting_phone == 1 ? '开启' : '关闭'}}</template>
                  </el-table-column>
                  <el-table-column min-width="170" align="center" prop="setting_usb" label="USB数据功能">
                    <template slot-scope="scope">{{scope.row.setting_usb == 'usb_charge' ? '仅充电' : (scope.row.setting_usb == 'usb_mtp' ? 'MTP模式（媒体传输协议）' : 'Midi模式')}}</template>
                  </el-table-column>
                  <el-table-column min-width="140" align="center" prop="setting_tfmedia" label="影音娱乐功能管控">
                    <template slot-scope="scope">{{scope.row.setting_tfmedia == 1 ? '开启' : '禁用'}}</template>
                  </el-table-column>
                  <el-table-column min-width="200" align="center" prop="setting_phones" label="电话白名单列表"></el-table-column>
                  <el-table-column min-width="150" align="center" prop="createtime" label="创建时间">
                    <template slot-scope="scope">{{scope.row.createtime| newDate}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="control_box" style="margin-top:20px" v-show="controlData.browserAllList.length != 0">
              <div class="header">浏览器网址白名单</div>
              <div style="padding: 0 40px;">
                <el-table :data="controlData.browserAllList" border style="width: 100%">
                  <el-table-column min-width="100" align="center" prop="username" label="归属"></el-table-column>
                  <el-table-column min-width="100" align="center" prop="batch" label="批次"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="white_addr" label="允许上网网址"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="black_addr" label="禁止上网网址"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="white_ip" label="IP白名单"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="black_ip" label="IP黑名单"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
                    <template slot-scope="scope">{{scope.row.create_time | newDate}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="control_box" style="margin-top:20px" v-show="controlData.labelAllList.length != 0">
              <div class="header">浏览器主页书签</div>
              <div style="padding: 0 40px;">
                <el-table :data="controlData.labelAllList" border style="width: 100%">
                  <el-table-column min-width="100" align="center" prop="username" label="归属"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="batch" label="批次"></el-table-column>
                  <el-table-column min-width="180" align="center" prop="home_page" label="浏览器主页"></el-table-column>
                  <el-table-column min-width="180" align="center" prop="label_page" label="书签管控设置"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
                    <template slot-scope="scope">{{scope.row.create_time | newDate}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="control_box" style="margin-top:20px" v-show="controlData.appControlList.length != 0">
              <div class="header">应用管理</div>
              <div style="padding: 0 40px;">
                <el-table :data="controlData.appControlList" border style="width: 100%">
                  <el-table-column min-width="80" align="center" prop="username" label="归属"></el-table-column>
                  <el-table-column min-width="80" align="center" prop="app_batch" label="批次">
                    <template slot-scope="scope">{{scope.row.app_batch == 0 ? '公共应用' : scope.row.app_batch}}</template>
                  </el-table-column>
                  <el-table-column min-width="100" align="center" prop="app_name" label="应用名称"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="app_package" label="应用包名"></el-table-column>
                  <el-table-column min-width="80" align="center" prop="id" label="应用图标">
                    <template slot-scope="scope">
                      <div class="icon_img flex flex_cen"><img :src="scope.row.app_img" alt /></div>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="100" align="center" prop="id" label="是否允许滑动">
                    <template slot-scope="scope">{{scope.row.is_slide ? '允许' : '禁止'}}</template>
                  </el-table-column>
                  <el-table-column min-width="100" align="center" prop="id" label="是否允许升级">
                    <template slot-scope="scope">{{scope.row.is_upgrade ? '允许' : '禁止'}}</template>
                  </el-table-column>
                  <el-table-column min-width="100" align="center" prop="id" label="是否允许联网">
                    <template slot-scope="scope">{{scope.row.is_network ? '允许' : '禁止'}}</template>
                  </el-table-column>
                  <el-table-column min-width="80" align="center" prop="id" label="开机自启">
                    <template slot-scope="scope">{{scope.row.is_auto ? '允许' : '禁止'}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="control_box" style="margin-top:20px" v-show="controlData.appScreenList.length != 0">
              <div class="header">应用霸屏</div>
              <div style="padding: 0 40px;">
                <el-table :data="controlData.appScreenList" border style="width: 100%">
                  <el-table-column min-width="140" align="center" prop="username" label="归属"></el-table-column>
                  <el-table-column min-width="130" align="center" prop="batch" label="批次"></el-table-column>
                  <el-table-column min-width="180" align="center" prop="app_name" label="默认霸屏应用"></el-table-column>
                  <el-table-column min-width="160" align="center" prop="app_package" label="包名"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
                    <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="control_box" style="margin-top:20px" v-show="controlData.appGroundAllList.length != 0">
              <div class="header">应用内部跳转管控</div>
              <div style="padding: 0 40px;">
                <el-table :data="controlData.appGroundAllList" border style="width: 100%">
                  <el-table-column min-width="100" align="center" prop="username" label="归属"></el-table-column>
                  <el-table-column min-width="80" align="center" prop="batch" label="批次"></el-table-column>
                  <el-table-column min-width="130" align="center" prop="app_name" label="应用名称"></el-table-column>
                  <el-table-column min-width="160" align="center" prop="package" label="包名"></el-table-column>
                  <el-table-column min-width="160" align="center" prop="address" label="域名/地址"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
                    <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="control_box" style="margin-top:20px" v-show="controlData.appInsideList.length != 0">
              <div class="header">应用内部广告管控</div>
              <div style="padding: 0 40px;">
                <el-table :data="controlData.appInsideList" border style="width: 100%">
                  <el-table-column min-width="110" align="center" prop="username" label="归属"></el-table-column>
                  <el-table-column min-width="80" align="center" prop="batch" label="SN码批次"></el-table-column>
                  <el-table-column min-width="80" align="center" prop="app_name" label="应用名"></el-table-column>
                  <el-table-column min-width="110" align="center" prop="package" label="包名"></el-table-column>
                  <el-table-column min-width="180" align="center" prop="content" label="限制ID">
                    <template slot-scope="scope">
                      <div class="flex flex_cen flex-wrap">
                        <div v-for="(item,index) in scope.row.content.split(',')" :key="index" style="width:50%">{{item}}</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="130" align="center" prop="desc" label="说明"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
                    <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="control_box" style="margin-top:20px" v-show="controlData.clearAppList.length != 0">
              <div class="header">应用缓存清理</div>
              <div style="padding: 0 40px;">
                <el-table :data="controlData.clearAppList" border style="width: 100%">
                  <el-table-column min-width="110" align="center" prop="username" label="归属"></el-table-column>
                  <el-table-column min-width="160" align="center" prop="app_package" label="应用包名"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="sn_value" label="SN码"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="batch_id" label="批次"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="create_time" label="创建时间">
                    <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import {
  getEquip, getAppBySn, launchScreenshot, querySnScreens, deleteAll, singleSnRestart, singleSnReset, forceStopApp, refreshEquipParam, clearInstallAppCache,
  appIconList, timeControlList, whiteAppList, otherSettingList, browserAllList, labelAllList, appControlList, appScreenList, appGroundAllList, appInsideList, clearAppList
} from "@/api/equipment.js";
import { uninstallPackage } from "@/api/supervise";//删除应用信息
import battery from "@/components/electric"
import imgViewer from './img-viewer'
import mqttHandle from "@/utils/mqttHandler";
var client;
export default {
  components: { battery, imgViewer },
  props: {
    online: {
      type: Number,
      default: 2
    },
    snData: {
      type: String,
      defaulte: ''
    },
    studentStatus: {
      type: Object,
      defaulte: {}
    }
  },
  computed: {
    activeRoleName() {
      return localStorage.getItem('roleName') == '超级管理员' ? true : false
    },
    onlineBtn() {
      return this.is_online == 1 ? false : true
    }
  },
  watch: {

  },
  data() {
    return {
      on_lineImg: require('../../../../assets/images/pad.png'),
      off_lineImg: require('../../../../assets/images/pad1.jpg'),
      snInfoTabel: {},
      printscreenSwiper: [],
      app_install: [],
      photoLoading: false,
      imageIndex: 0,
      showViewer: false,
      previewSrcList: [],
      controlData: {
        appIconList: [], timeControlList: [], whiteAppList: [], otherSettingList: [], browserAllList: [], labelAllList: [],
        appControlList: [], appScreenList: [], appGroundAllList: [], appInsideList: [], clearAppList: []
      },
      is_online: this.online,
      topicSends: '',
    }
  },
  created() {
    this.getEquips(this.snData)
    this.getquerySnScreens(this.snData, 1)
    this.getAppBySns(this.snData)
    //管控策略
    this.getappIconList(this.snData)
    this.gettimeControlList(this.snData)
    this.getwhiteAppList(this.snData)
    this.getotherSettingList(this.snData)
    this.getbrowserAllList(this.snData)
    this.getlabelAllList(this.snData)
    this.getappControlList(this.snData)
    this.getappScreenList(this.snData)
    this.getappGroundAllList(this.snData)
    this.getappInsideList(this.snData)
    this.getclearAppList(this.snData)
    this.refresh(this.snData)
    this.createMqtt()
  },
  methods: {
    closeViewer() {
      this.showViewer = false
    },
    getImgIndex(index) {
      this.imageIndex = index
      this.showViewer = true
    },
    refresh(sn) {
      let qs = { sn: sn, userId: localStorage.getItem("ID") }
      refreshEquipParam(qs).then(res => {
        setTimeout(() => {
          this.getEquips(sn)
          this.getAppBySns(sn)
        },3000)
        this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
      }).catch(err => {
        err.code === 400 ? this.$message({ message: err.msg, type: 'error', customClass: 'mzindex' }) : ''
      })
    },
    sninfoClose() {
      this.$emit('sninfoClose')
    },
    getEquips(sn) {
      getEquip({ sn: sn }).then(res => {
        this.snInfoTabel = res.data
      }).catch(err => {
        this.snInfoTabel.sn = sn
      })
    },
    //获取应用已安装APP信息
    getAppBySns(sn) {
      getAppBySn({ sn: sn }).then(res => {
        this.app_install = res.data
      }).catch(err => {
        this.app_install = []
      })
    },
    //查看截图信息
    async getquerySnScreens(sn, type = 0) {
      let qs = { userId: localStorage.getItem("ID"), sn: sn }
      this.photoLoading = true
      await querySnScreens(qs).then(res => {
        res.data.forEach(async item => {
          this.$set(item, 'imgSize', await this.getImgSize(item.img))
        })
        this.photoLoading = false
        this.printscreenSwiper = res.data
        this.previewSrcList = res.data.map(item => item.img)
      }).catch(err => {
        this.printscreenSwiper = []
        this.photoLoading = false
        if (!type) {
          err.code == 400 ? this.$message({ message: '没有截图信息', type: 'error', customClass: 'mzindex' }) : ''
        }
      })
    },
    // 获取图片尺寸
    getImgSize(url) {
      return new Promise((resolve, reject) => {
        let imgObj = new Image()
        imgObj.src = url
        imgObj.onload = () => {
          resolve({ width: imgObj.width, height: imgObj.height })
        }
      })
    },
    //截图
    getlaunchScreenshot(sn) {
      let text = this.onlineBtn ? '设备已离线,截屏功能无法使用' : '是否要发送截图指令?'
      let qs = { userId: localStorage.getItem("ID"), sn: sn }
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'mzindex'
      }).then(() => {
        if (!this.onlineBtn) {
          launchScreenshot(qs).then(res => { this.$message({ message: '截屏指令发送成功', type: 'success', customClass: 'mzindex' }) })
        }
      }).catch(() => { })
    },
    //删除截图信息
    getdeleteAll(sn) {
      let qs = { userId: localStorage.getItem("ID"), sn: sn }
      this.$confirm('是否要清除所有截图信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'mzindex'
      }).then(() => {
        deleteAll(qs).then(res => {
          this.printscreenSwiper = []
          this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
        })
      }).catch(() => { })
    },
    //强制停用设备应用
    getforceStopApp(item) {
      let qs = { userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip"), sn: item.sn, packageName: item.app_package }
      this.$confirm('是否要强制停用设备应用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'mzindex'
      }).then(res => {
        forceStopApp(qs).then(res => {
          this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
          this.getAppBySns(item.sn)
        }).catch(err => { })
      }).catch(err => { })
    },
    getclearInstallAppCache(item) {
      let qs = { userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip"), id: item.id }
      this.$confirm('是否要清除缓存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'mzindex'
      }).then(res => {
        clearInstallAppCache(qs).then(res => {
          this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
          this.getAppBySns(item.sn)
        }).catch(err => { })
      }).catch(err => { })
    },
    //SN删除应用
    getuninstallPackage(item) {
      let qs = { userId: localStorage.getItem("ID"), sn: item.sn, package_name: item.app_package }
      this.$confirm('是否要卸载设备应用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'mzindex'
      }).then(res => {
        uninstallPackage(qs).then(res => {
          this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
          this.getAppBySns(item.sn)
        }).catch(err => { })
      }).catch(err => { })
    },
    //SN重启设备
    singleSnRestarts(id) {
      let qs = { id: id, userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip") }
      this.$confirm('是否要重启?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'mzindex'
      }).then(() => {
        singleSnRestart(qs).then(res => {
          this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
        }).catch(err => { })
      }).catch(() => { })
    },
    //SN恢复出厂设置
    singleSnReset(id) {
      let qs = { id: id, userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip") }
      this.$confirm('是否要恢复出厂设置?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'mzindex'
      }).then(() => {
        singleSnReset(qs).then(res => {
          this.$message({ message: res.msg, type: 'success', customClass: 'mzindex' })
        }).catch(err => { })
      }).catch(() => { });
    },
    getappIconList(sn) {
      appIconList({ sn: sn }).then(res => {
        this.controlData.appIconList = res.data
      }).catch(err => {
        this.controlData.appIconList = []
      })
    },
    gettimeControlList(sn) {
      timeControlList({ sn: sn }).then(res => {
        this.controlData.timeControlList = res.data
      }).catch(err => {
        this.controlData.timeControlList = []
      })
    },
    getwhiteAppList(sn) {
      whiteAppList({ sn: sn }).then(res => {
        this.controlData.whiteAppList = res.data
      }).catch(err => {
        this.controlData.whiteAppList = []
      })
    },
    getotherSettingList(sn) {
      otherSettingList({ sn: sn }).then(res => {
        this.controlData.otherSettingList = res.data
      }).catch(err => {
        this.controlData.otherSettingList = []
      })
    },
    getbrowserAllList(sn) {
      browserAllList({ sn: sn }).then(res => {
        this.controlData.browserAllList = res.data
      }).catch(err => {
        this.controlData.browserAllList = []
      })
    },
    getlabelAllList(sn) {
      labelAllList({ sn: sn }).then(res => {
        this.controlData.labelAllList = res.data
      }).catch(err => {
        this.controlData.labelAllList = []
      })
    },
    getappControlList(sn) {
      appControlList({ sn: sn }).then(res => {
        this.controlData.appControlList = res.data
      }).catch(err => {
        this.controlData.appControlList = []
      })
    },
    getappScreenList(sn) {
      appScreenList({ sn: sn }).then(res => {
        this.controlData.appScreenList = res.data
      }).catch(err => {
        this.controlData.appScreenList = []
      })
    },
    getappGroundAllList(sn) {
      appGroundAllList({ sn: sn }).then(res => {
        this.controlData.appGroundAllList = res.data
      }).catch(err => {
        this.controlData.appGroundAllList = []
      })
    },
    getappInsideList(sn) {
      appInsideList({ sn: sn }).then(res => {
        this.controlData.appInsideList = res.data
      }).catch(err => {
        this.controlData.appInsideList = []
      })
    },
    getclearAppList(sn) {
      clearAppList({ sn: sn }).then(res => {
        this.controlData.clearAppList = res.data
      }).catch(err => {
        this.controlData.clearAppList = []
      })
    },
    /**创建mqtt**/
    createMqtt() {
      var mqtt; //mqtt 处理对象（全局变量）
      //创建链接，接收数据
      var topic = 'MQTT/T/UPDATE_DEVICE_INFO/SN_' + this.snData
      mqtt = new mqttHandle(topic);
      client = mqtt.createConnect();
      client.on("message", (topic, message) => {
        try {
          let status = ""
          if (message.toString().length === 1) {
            status = message.toString() // status 1: 在线 2：离线
          }else {
            let jsonStatus = JSON.parse(message.toString())
            status = jsonStatus.message
          }
          this.is_online = status
        } catch (error) {}
      });
    },

    //停止订阅mqtt
    disConnect() {
      if (client != null) {
        client.unsubscribe(this.topicSends);
        client = null;
      }
    },
  },
}
</script>

<style scoped>
/deep/.el-carousel__item:nth-child(2n + 1) {
  background-color: #f9f9f9 !important;
}
/deep/.el-collapse-item__content {
  background-color: #f9f9f9;
}
/deep/.el-table tr {
  background-color: #f9f9f9;
}
/deep/.el-table th {
  background-color: #f9f9f9;
  font-weight: 500;
}
/deep/.el-table__empty-block {
  background-color: #f9f9f9;
}
/deep/.el-collapse-item__header {
  border-radius: 8px;
}
</style>

<style lang="scss" scoped>
.img_go {
  transform: rotate(-360deg);
  transition: all 2s;
}
.img_stop {
  transition: all 2s;
}
.snInfo {
  color: #232323;
  font-size: 12px;
  .bg_box {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
  }
  .title_w {
    font-weight: 600;
    font-size: 12px;
    color: #666666;
  }
  .ipad_table {
    padding: 10px 20px 10px 20px;
    .control_box {
      .header {
        font-size: 12px;
      }
    }
  }
  .mation {
    font-size: 12px;
    color: #666666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    i {
      margin-right: 5px;
    }
  }
  .ipad_info {
    height: 352px;
    .header {
      margin-bottom: 22px;
    }
    .content {
      text-align: center;
      margin-top: 20px;
      .ipad_img {
        margin-bottom: 20px;
        img {
          height: 79px;
          width: 120px;
        }
      }
      p {
        margin: 0 0 0 38%;
        line-height: 20px;
        text-align: left;
      }
    }
    .footer {
      text-align: center;
      margin-top: 10px;
    }
  }
  .hardware_info {
    padding-bottom: 5px;
    .hardware {
      ul {
        li {
          line-height: 20px;
          p {
            margin: 0;
            color: #999;
          }
        }
      }
    }
  }
  .app-img {
    height: 30px;
    width: 30px;
    margin-right: 5px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .tilte_prompt {
    margin-left: 10px;
  }
  .swiper_img {
    position: relative;
    .siper_txt {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      letter-spacing: 2px;
      color: #999;
    }
  }
}
</style>
